<!--
 * @Author: your name
 * @Date: 2021-08-09 23:08:56
 * @LastEditTime: 2021-08-11 20:45:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Self\hrsaas-86\src\views\departments\components\add.vue
-->
<template>
  <!-- 新增部门的对话框 
        title是标题
        visible 对话框绑定的布尔值-->
  <el-dialog
    title="提示"
    :visible="dialogVisible"
    width="50%"
    @close="closeDialog(Data)"
  >
    <!-- @open="showDialog()" -->
    <!-- 在上面使用@open对话框打开的时候都会回显 我们要求只在编辑的时候进行回显 -->
    <!-- 表单区域 -->
    <el-form label-width="120px" :model="form" :rules="rules" ref="formRef">
      <el-form-item label="部门名称" prop="name">
        <el-input
          style="width:80%"
          placeholder="1-50个字符"
          v-model="form.name"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          style="width:80%"
          placeholder="1-50个字符"
          v-model="form.code"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          style="width:80%"
          placeholder="请选择"
          v-model="form.manager"
        >
          <!-- label展示的是文本  ,value属性是同步给select的v-model关联的值 -->
          <!-- 此处这value绑定的是username字段，是接口设计的问题，真正开发中传递id才是对的 -->
          <el-option
            v-for="item in SimpleList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          style="width:80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
          v-model="form.introduce"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleClick">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
// 获取部门负责人列表
import { reqGetEmployeeSimple } from '@/api/user.js'
import { reqAddDepartments } from '@/api/departments'
import { reqGetDepartDetail, reqUpdateDepartments } from '@/api/departments'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    Data: {
      type: Object,
      required: true
    },
    // 接收原始部门列表数据
    deptsList: {
      type: Array,

      required: true
    }
  },
  data() {
    // 校验同级部门中禁止出现重复部门
    const checkNameRepeat = (rule, value, cb) => {
      // 拿到当前部门的子部门列表的名称和value比较
      const boolean = this.Data.children.some(item => item.name === value)
      boolean ? cb(new Error(`同级部门下已经有${value}的部门了`)) : cb()
    }
    // 部门编码在整个模块中都不允许重复
    const checkCodeRepeat = (rule, value, cb) => {
      // 拿到当前部门的子部门列表的名称和value比较
      const boolean = this.deptsList.some(item => item.code === value)
      boolean ? cb(new Error(`已存在${value}部门编码了`)) : cb()
    }
    return {
      form: {
        name: '',
        code: '',
        introduce: '',
        manager: ''
      },
      // 表单的检验规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: ['change', 'blur']
          },
          {
            min: 1,
            max: 50,
            message: '部门名称必须1-10个字符',
            trigger: ['change', 'blur']
          },
          {
            validator: checkNameRepeat,
            trigger: ['change', 'blur']
          }
        ],
        code: [
          {
            required: true,
            message: '请输入部门编码',
            trigger: ['change', 'blur']
          },
          {
            min: 1,
            max: 50,
            message: '部门编码必须1-10个字符',
            trigger: ['change', 'blur']
          },
          {
            validator: checkCodeRepeat,
            trigger: ['change', 'blur']
          }
        ],
        manager: [
          {
            required: true,
            message: '请选择部门负责人',
            trigger: 'change'
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入部门介绍',
            trigger: ['change', 'blur']
          },
          {
            min: 1,
            max: 300,
            message: '部门介绍必须1-50个字符',
            trigger: ['change', 'blur']
          }
        ]
      },
      // 发请求获取到的负责人列表
      SimpleList: []
    }
  },
  created() {
    this.getSimpleList()
  },
  methods: {
    closeDialog() {
      console.log('关闭了')
      this.$emit('closeDialog')
      // resetFields方法对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.formRef.resetFields()
    },
    async getSimpleList() {
      const { data } = await reqGetEmployeeSimple()
      this.SimpleList = data
    },
    // 点击确定
    handleClick() {
      // 1.表单预校验
      this.$refs.formRef.validate(async boo => {
        if (boo) {
          if (this.form.id) {
            // 编辑的业务
            // 处于编辑状态  并且form中是有id这个属性的
            const { message } = await reqUpdateDepartments(this.form)
            // 3. 提示信息
            this.$message.success(message)
            // 4.关闭弹窗
            this.closeDialog()
            // 5. 重新渲染数据
            this.$emit('reload')
          } else {
            // 2.新增部门
            const { message } = await reqAddDepartments({
              ...this.form,
              pid: this.Data.id
            })
            // 3. 提示信息
            this.$message.success(message)
            // 4.关闭弹窗
            this.closeDialog()
            // 5. 重新渲染数据
            this.$emit('reload')
          }
        }
      })
    },
    // form对象赋值
    async showDialog(Data) {
      // this.form = Data
      // 发送请求 获取部门信息
      const { data } = await reqGetDepartDetail(Data.id)
      //  将查询回来的信息 同步给form
      this.form = data
    }
  }
}
</script>
